<template>
  <div class="match">
    <div class="home-top" ref="top">
      <mt-header title="赛事详情">
        <mt-button icon="back" @click='$router.back(-1)' slot="left"></mt-button>
      </mt-header>
      <mt-navbar class="navbar-match" v-model="selected">
        <mt-tab-item id="1">竞赛规程</mt-tab-item>
        <mt-tab-item id="2" style="flex:0.8">秩序册</mt-tab-item>
        <mt-tab-item id="3">名单公示</mt-tab-item>
        <mt-tab-item id="4" style="flex:1.2">抽签分组表</mt-tab-item>
        <mt-tab-item id="5">比赛成绩</mt-tab-item>
      </mt-navbar>
    </div>
    <div ref="block"></div>
    <div ref="backBox" >
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
          <div class="match-item">
            <div class="match-item-img">
              <img src="@/assets/img/banner.jpg" >
            </div>
          </div>
          <div class="my-field" style="margin:0 0 15px;">
            <div class="my-field-item"> 
              <div class="my-field-item-l tc fwb">{{obj.title}}</div> 
            </div> 
            <div class="my-field-item">
              <span class="my-field-item-l gray"><b class="icon_con"><i style="color:#00a0e9;" class="fa fa-tag"></i></b>比赛类别</span>
              <div class="my-field-item-r">{{ getTypeName(obj.kind) }}</div> 
            </div> 
            <div class="my-field-item">
              <span class="my-field-item-l gray"><b class="icon_con"><i style="color:#3db231;" class="fa fa-clock-o"></i></b>比赛时间</span>
              <div class="my-field-item-r">{{obj.starttime}} 至 {{obj.endtime}}</div> 
            </div>
            <div class="my-field-item">
              <span class="my-field-item-l gray"><b class="icon_con"><i style="color:#8b7df2; font-size: 18px;" class="fa fa-hourglass-end"></i></b>报名截止</span>
              <div class="my-field-item-r">{{obj.overtime}}</div> 
            </div>
            <div class="my-field-item">
              <span class="my-field-item-l gray"><b class="icon_con"><i style="color:#fdb300; font-size: 18px;" class="fa fa-flag"></i></b>比赛状态</span>
              <div class="my-field-item-r">{{getStepTxt(obj.matchStatus)}}</div> 
            </div>
            <div class="my-field-item">
              <span class="my-field-item-l gray"><b class="icon_con"><i style="color:#f64f14;" class="fa fa-cny"></i></b>报名费用</span>
              <div class="my-field-item-r">{{obj.money}}元</div> 
            </div>
            <div class="my-field-item">
              <span class="my-field-item-l gray"><b class="icon_con"><i style="color:#00a0e9;" class="fa fa-map-marker"></i></b>比赛地址</span>
              <div class="my-field-item-r">{{obj.matchAddress}}</div> 
            </div>
          </div>

          <div class="p10" style="background: #fff;">
            <p class="f14 mb10 fwb" style="border-bottom: 1px solid #ddd; line-height: 30px;">比赛说明</p>
            <div class="f14" v-html="obj.matchContent"></div>            
          </div>
          <div style="height: 61px;"></div>
          <div v-show="isSingle" style="position: fixed; width: 100%; bottom: 0; left: 0; z-index: 10; background-color: #f0f0f0;">
            <div style="margin: 10px; display: flex; ">
              <mt-button style="flex: 1; margin-right:10px;" @click='$router.push("/enroll/single/step1")' type="danger">个人报名</mt-button>
              <mt-button style="flex: 1;" @click='$router.push("/enroll/team/step1")' type="primary">集体报名</mt-button>
            </div>
          </div>
          <div v-show="!isSingle" style="display: flex; position: fixed; width: 100%; bottom: 0; left: 0; padding: 10px 0; z-index: 10;">
            <mt-button style="flex: 1; margin: 0 10px;" @click='$router.push("/enroll/group/step1")' type="danger">团体报名</mt-button>
          </div>

        </mt-tab-container-item>
        <mt-tab-container-item id="2">

          2

        </mt-tab-container-item>
        <mt-tab-container-item id="3">

          3

        </mt-tab-container-item>
        <mt-tab-container-item id="4">

          4

        </mt-tab-container-item>
        <mt-tab-container-item id="5">  

          5

        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>

<script>
var stepObj = {
  1:"报名中",
  2:"报名结束",
  3:"比赛中",
  4:"比赛结束"
};
export default { 
  data () {
    return {
      obj: {
        title:""
      },
      selected:"1",
      matchId:this.$route.params.id,
      isSingle:this.$route.query.kind == "SIGNMATCH"  //单项赛还是团体赛
    }
  },
  mounted: function (){
    var top_h = this.$refs.top.offsetHeight;
    this.$refs.block.style.height = top_h + "px";
    this.$refs.backBox.style.height = document.documentElement.clientHeight - top_h + "px";
    this.axios.get(this._site + '/match/queryById/' + this.matchId)
    .then(response => {
      var res = response.data;
      if(res.status){
        this.obj = res;
      }
    }).catch(error => {

    });

  },
  methods:{
    toDetails(id){
      // alert(id)
    },
    loadMore(){
      this.loading = true; 
    },
    getFilter(status){
      if(!status) status = 0;
      this.status = status;
      this.list = [];
      this.page = 0;
      this.hasMore=true,
      this.loadMore();
    },
    getStepTxt(id){
      return stepObj[id];
    },
    getTypeClass(t){
      var s;
      if(t == 1) s = "match-type-1";
      else if(t == 2) s = "match-type-2";
      else s = "match-type-3";
      return s;
    },
    getTypeName(kind){
      var s;
      if(kind == 1) s = "单项赛";
      else if(kind == 2) s = "团体赛";
      else if(kind == 3) s = "混合赛";
      else s = ""
      return s;
    }
  }
}
</script>